<template>
	<div>
		<div class="topTitle">广告管理</div>
		<el-form inline :model="query" label-width="80px">
			<el-form-item label="地区">
				<el-cascader :props="props" v-model="query.city" :options="areaData" placeholder="请选择地区"
					class="width260 margin-right10" @change="areaChange"></el-cascader>
			</el-form-item>
			<el-form-item label="广告位置">
				<el-select v-model="query.type" placeholder="请选择广告位置" class="width260 margin-right10">
					<el-option v-for="item in adPositionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="query.status" placeholder="请选择状态" class="width260 margin-right10">
					<el-option label="正常" :value="0"></el-option>
					<el-option label="禁用" :value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="广告类别">
				<el-select v-model="query.category" placeholder="请选择广告类别" class="width260 margin-right10">
					<el-option label="机构广告" :value="1"></el-option>
					<el-option label="图片" :value="2"></el-option>
					<el-option label="文字" :value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="标题">
				<el-input v-model="query.titleName" placeholder="请输入关键字" class="width260 margin-right10"></el-input>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="onDateChange">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="margin-bottom20">
			<el-button type="primary" @click="handleEdit">新建</el-button>
		</div>
		<el-table :data="tableData" border header-cell-class-name="table-header-style">
			<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
			<el-table-column label="排序" prop="sort" align="center" width="80"></el-table-column>
			<el-table-column label="广告名称" prop="title" align="center"></el-table-column>
			<el-table-column label="广告类别" align="center">
				<template slot-scope="{row}">
					<span v-if="row.category==1">机构广告</span>
					<span v-else-if="row.category==2">图片</span>
					<span v-else-if="row.category==3">文字</span>
				</template>
			</el-table-column>
			<el-table-column label="广告位置" :formatter="formatter" align="center"></el-table-column>
			<el-table-column label="跳转类型" :formatter="formatterLink" align="center"></el-table-column>
			<el-table-column label="覆盖地区" prop="cityName" align="center">
				<template slot-scope="scope">
					<el-tag v-for="(item,index) in scope.row.cities" :key="index"
						class="margin-right10">{{item.area==0?'默认':item.area}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="点击次数" prop="clickCount" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" @change="(val)=>onChange(val,scope.row)">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="endTime" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="text" @click="handleEditCity(scope.row)">编辑城市
					</el-button>
					<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
					<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDel(scope.row.id)">
						<el-button type="text" slot="reference">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 新建编辑广告 -->
		<el-dialog :title="title" :visible.sync="visible" width="50%">
			<el-form :model="form" label-width="140px" ref="form" :rules='rules'>
				<el-form-item label="广告标题" prop="title">
					<div class="row-me row-center">
						<el-input placeholder="请输入广告标题" v-model="form.title" class="flex1 margin-right20"></el-input>
						<el-input placeholder="排序序号" v-model="form.sort" class="width120"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="广告位置" prop="type">
					<el-select v-model="form.type" placeholder="请选择广告位置" class="width100Per">
						<el-option v-for="item in adPositionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<template v-if="form.type==28">
					<el-form-item label="地址">
						<el-input v-model="form.address" placeholder="请输入地址"></el-input>
					</el-form-item>
					<el-form-item label="发布人">
						<el-input v-model="form.publisher" placeholder="请输入发布人"></el-input>
					</el-form-item>
					<el-form-item label="头像">
						<el-image v-if="form.icon" class="width100 height100 radius6 margin-right10" :src="form.icon"
							:preview-src-list="[form.icon]"></el-image>
						<el-button type="text" @click="clickImg(1)">点击图片库</el-button>
					</el-form-item>
				</template>
				<el-form-item label="关联简章公告" v-if="form.type==29">
					<el-select v-model="form.content" placeholder="请关联简章公告" class="width100Per">
						<el-option v-for="(item,index) in articleNoticeData" :key="index" :label="item.title"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="广告类别" prop="category">
					<el-select v-model="form.category" placeholder="请选择广告类别" class="width100Per">
						<el-option label="机构广告" :value="1"></el-option>
						<el-option label="图片" :value="2"></el-option>
						<el-option label="文字" :value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="关联机构"
					v-if='form.type==30||form.type==21||form.type==22||form.type==23||form.type==24||form.type==26'>
					<el-select v-model="form.content" placeholder="请关联机构" class="width100Per">
						<el-option v-for="(item,index) in organAll" :key="index" :label="item.organName"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker style="width: 100%;" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" clearable
						type="datetime" placeholder="请选择结束时间">
					</el-date-picker>
				</el-form-item>
				<template v-if='form.type!=30&&form.type!=21&&form.type!=22&&form.type!=23&&form.type!=24&&form.type!=26'>
					<el-form-item label="广告跳转类型" prop="linkTo">
						<el-select v-model="form.linkTo" placeholder="请选择广告跳转类型" class="width100Per">
							<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="内容" v-if="form.linkTo==4" prop="content">
						<vue-ueditor-wrap v-model="form.content" editor-id="editor" :config="editorConfig"
							:editorDependencies="['ueditor.config.js','ueditor.all.js']" />
					</el-form-item>
					<el-form-item v-if="form.linkTo==1">
						<el-input placeholder="请输入" v-model="form.url"></el-input>
					</el-form-item>
					<el-form-item label="对应小程序appid" prop="content" v-if="form.linkTo==2||form.linkTo==5">
						<el-input v-model="form.content" placeholder="请输入对应小程序appid"></el-input>
					</el-form-item>
				</template>
				<el-form-item label="原始id" v-if="form.linkTo==2" prop="originalId">
					<el-input placeholder='请输入' v-model="form.originalId"></el-input>
				</el-form-item>
				<el-form-item label="关联商品" v-if="form.linkTo==7">
					<el-select v-model="form.content" placeholder="请关联商品" class="width100Per">
						<el-option v-for="(item,index) in productData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="关联专题" v-if="form.linkTo==10">
					<el-select v-model="form.content" placeholder="请关联专题" class="width100Per">
						<el-option v-for="(item,index) in subjectAll" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="关联简章公告" v-if="form.linkTo==8">
					<el-select v-model="form.content" placeholder="请关联简章公告" class="width100Per">
						<el-option v-for="(item,index) in articleNoticeData" :key="index" :label="item.title"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="关联机构" v-if='form.linkTo==9'>
					<el-select v-model="form.content" placeholder="请关联机构" class="width100Per">
						<el-option v-for="(item,index) in organAll" :key="index" :label="item.organName"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上传图片">
					<el-image v-if="form.image" class="width100 height100 radius6 margin-right10" :src="form.image"
						:preview-src-list="[form.image]"></el-image>
					<el-button type="text" @click="clickImg(2)">点击图片库</el-button>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button @click="handleSave" type="primary">确 认</el-button>
			</span>
		</el-dialog>

		<!-- 编辑涵盖城市 -->
		<el-dialog title="城市编辑" :visible.sync="editCityVisible" width="40%" @close="getData">
			<template>
				<el-select filterable v-model="queryCity.provinceId" class="mr20" @change="selectCities" placeholder="请选择省份">
					<el-option v-for="item in queryCity.provinces" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-select filterable v-model="queryCity.cityName" multiple class="mr20" placeholder="请选择城市">
					<el-option v-for="item in queryCity.cities" :key="item.name" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-button type="primary" @click="addCity">添 加</el-button>

				<el-divider></el-divider>

				<el-tag v-for="(city,index) in currentCities" :key="index" closable @close="deleteCity(city,index)"
					style="margin-right: 10px; margin-bottom: 8px">
					{{ city==0?'默认':city }}
				</el-tag>
			</template>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			imgLibrary
		},
		data() {
			let that = this
			return {
				editorConfig: {
					serverUrl: process.env.BASE_API + "/file/upload",
					UEDITOR_HOME_URL: '/static/UEditor/',
					toolbarCallback: function(cmd, editor) {
						switch (cmd) {
							case 'insertimage':
								that.imgIndex = 3
								that.$refs.imgLibrary.show()
								return true;
						}
					}
				},
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				pageTotal: 0,
				props: {
					value: 'id',
					label: 'name',
					checkStrictly: true,
				},
				adPositionList: [{
						id: 0,
						name: '首页轮播'
					},
					{
						id: 3,
						name: '启动页'
					},
					{
						id: 5,
						name: '做题结果页广告'
					},
					{
						id: 6,
						name: '背题评论页'
					},
					{
						id: 8,
						name: '首页弹窗广告'
					},
					{
						id: 11,
						name: '首页浮动广告'
					},
					{
						id: 13,
						name: '个人中心广告'
					},
					{
						id: 14,
						name: '搜索页猜你喜欢'
					},
					{
						id: 15,
						name: '搜索页广告位'
					},
					{
						id: 16,
						name: '首页底部商品推荐'
					},
					{
						id: 17,
						name: '搜索结果页广告'
					},
					{
						id: 18,
						name: '背题页文字广告'
					},
					{
						id: 19,
						name: '模考大赛扉页'
					},
					{
						id: 20,
						name: '历年真题扉页文字广告'
					},
					{
						id: 21,
						name: '历年真题扉页机构广告'
					},
					{
						id: 22,
						name: '答题模式机构广告'
					},
					{
						id: 23,
						name: '简章公告详情页'
					},
					{
						id: 24,
						name: '上岸经验详情页'
					},
					{
						id: 25,
						name: '机构列表轮播图'
					},
					{
						id: 26,
						name: '机构历年真题扉页'
					},
					{
						id: 27,
						name: '找讲师轮播图广告类型'
					},
					{
						id: 28,
						name: '消息页最新推荐'
					},
					{
						id: 29,
						name: '消息底部简章公告'
					},
					{
						id: 30,
						name: '消息页机构广告'
					}
				],
				categoryList: [{
						id: 0,
						name: '不跳转'
					},
					{
						id: 1,
						name: 'webview'
					}, {
						id: 2,
						name: '跳转小程序首页'
					},
					{
						id: 4,
						name: '富文本'
					}, {
						id: 5,
						name: '跳转其他APP'
					},
					// {
					// 	id: 6,
					// 	name: 'app跳转小程序'
					// },
					{
						id: 7,
						name: '跳转商品'
					},
					{
						id: 8,
						name: '跳转简章公告'
					},
					{
						id: 9,
						name: '机构详情'
					},
					{
						id: 10,
						name: '跳转专题'
					}
				],
				dateTime: [],
				areaData: [],
				title: '',
				form: {},
				visible: false,
				rules: {
					title: {
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					},
					content: {
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					},
					type: {
						required: true,
						message: '请选择广告位置',
						trigger: 'change'
					},
					category: {
						required: true,
						message: '请选择广告类别',
						trigger: 'change'
					},
					linkTo: {
						required: true,
						message: '请选择广告跳转类型',
						trigger: 'change'
					},
					endTime: {
						required: true,
						message: '请选择结束时间',
						trigger: 'change'
					},
					content: {
						required: true,
						message: '请输入对应小程序appid',
						trigger: 'blur'
					},
					originalId: {
						required: true,
						message: '请输入原始id',
						trigger: 'blur'
					}
				},
				imgIndex: 0,
				articleNoticeData: [],
				organAll: [],
				editCityVisible: false,
				queryCity: {
					provinces: [],
					provinceId: '',
					cities: [],
					cityName: []
				},
				currentCities: [],
				productData: [],
				subjectAll: []
			}
		},
		mounted() {
			this.getAllArea()
			this.getOrganAll()
			this.getProduceData()
			this.getPageProduct()
			this.getArticleNotice()
			this.getData()
		},
		methods: {
			//获取专题下拉
			async getPageProduct() {
				const res = await this.$get('/admin/specialSubject/pageSubject', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.subjectAll = res.data.list
				}
			},
			//获取商品下拉
			async getProduceData() {
				const res = await this.$get('/admin/mall/pageProduct', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.productData = res.data.list
				}
			},
			async deleteCity(city, index) {
				const res = await this.$get('/admin/setting/deleteAdvertiseCity', {
					city,
					categoryId: this.form.categoryId
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
					this.currentCities.splice(index, 1)
				}
			},
			onTypeChange(type) {
				if (type == 29) {
					this.getArticleNotice()
				}
			},
			//编辑城市
			async handleEditCity(row) {
				this.form.categoryId = row.id;
				if (this.queryCity.provinces.length == 0) {
					const res = await this.$get('/admin/area/getProvince')
					if (res.code == 1000) {
						res.data.unshift({
							name: '默认',
							id: '0'
						});
						this.queryCity.provinces = res.data;
					}
				}
				this.queryCity.provinceId = '';
				this.queryCity.cityName = [];
				this.currentCities = [];
				if (row.cities) {
					for (let i = 0; i < row.cities.length; i++) {
						this.currentCities.push(row.cities[i].area);
					}
				}
				this.editCityVisible = true;
			},
			//确认编辑城市
			addCity() {
				this.queryCity.cityName = this.$.isEmpty(this.queryCity.cityName) ? '0' : this.queryCity.cityName
				this.$post('/admin/setting/addAdvertiseCity?categoryId=' + this.form.categoryId + '&cities=' + this
					.queryCity.cityName).then(res => {
					this.$message.success('添加成功');
					this.editCityVisible = false;
					this.currentCities = [];
					this.form = {};
				})
			},
			//选择城市
			async selectCities() {
				if (this.queryCity.provinceId == undefined || this.queryCity.provinceId == '0') {
					this.queryCity.cities = [{
						name: '默认',
						id: ''
					}];
				} else {
					const res = await this.$get('/admin/area/getCities', {
						provinceId: this.queryCity.provinceId
					})
					if (res.code == 1000) {
						this.queryCity.cities = res.data
					}
				}
			},
			//机构下拉
			async getOrganAll() {
				const res = await this.$postForm('/admin/messages/organAll', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.organAll = res.data.list
				}
			},
			//简章公告下拉
			async getArticleNotice() {
				const res = await this.$get('/admin/articleNotice/pageArticleNotice', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.articleNoticeData = res.data.list
				}
			},
			//获取选中的图片
			handleImgOk(data) {
				if (this.imgIndex == 1) {
					this.$set(this.form, 'icon', data)
				} else if (this.imgIndex == 2) {
					this.$set(this.form, 'image', data)
				} else if (this.imgIndex == 3) {
					this.form.content = this.form.content + `<img src='${data}'>`
				}
			},
			//点击图片库
			clickImg(type) {
				this.imgIndex = type
				this.$refs.imgLibrary.show()
			},
			//确认新建编辑广告
			handleSave() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						if (this.form.type == 30 || this.form.type == 21 || this.form.type == 22 || this.form.type == 23 || this
							.form.type == 24 || this.form.type == 26) {
							this.form.linkTo = 9
						}
						this.form.status = this.form.status ? 1 : 0
						this.$post('/admin/setting/addAdvertise', this.form).then(res => {
							if (res.code == 1000) {
								this.$message.success('操作成功')
								this.getData()
								this.visible = false
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//开启状态
			async onChange(val, row) {
				let status = val ? 1 : 0
				const res = await this.$post('/admin/setting/addAdvertise', {
					...row,
					status
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			//删除
			async handleDel(id) {
				const res = await this.$get('/admin/setting/delAdvertise', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			//编辑
			handleEdit(row) {
				if (row.id) {
					this.title = '编辑广告'
					this.form = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '新建广告'
					this.form = {}
				}
				this.visible = true
			},
			//广告位置
			formatter(row) {
				for (let item of this.adPositionList) {
					if (item.id == row.type) {
						return item.name
					}
				}
			},
			//跳转类型
			formatterLink(row) {
				for (let item of this.categoryList) {
					if (item.id == row.linkTo) {
						return item.name
					}
				}
			},
			//分页
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			//获取数据
			async getData() {
				const res = await this.$get('/admin/setting/getAdvertise', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
					for (let item of this.tableData) {
						item.status = item.status ? true : false
					}
				}
			},
			//搜索
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			//重置
			handleRefresh() {
				this.dateTime = []
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = this.$.getTreeData(res.data)
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
			//创建时间变动
			onDateChange(val) {
				if (val.length == 0) {
					this.query.startTime = ''
					this.query.finishTime = ''
				} else {
					this.query.startTime = val[0]
					this.query.finishTime = val[1]
				}
			},
			//地区变动
			areaChange(val) {
				this.query.citySheng = ''
				this.query.cityShi = ''
				if (val && val.length != 0) {
					this.query.citySheng = val[0]
					this.query.cityShi = val[1]
				}
			}
		}
	}
</script>

<style>
</style>